import React, { Component, useState, useMemo, useEffect, useContext } from "react";
import { DownOutlined, UpOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Select, Space } from "antd";
import "./style.less";
import PageContext, { CONTEXT_VALUE } from "../../components/pageContainer/PageContext";

const AdvancedSearchForm = (props) => {
  // 默认表单项文字宽度
  const labelCol = {
    span: 8
  };
  // 默认表单项文字后内容宽度
  const wrapperCol = {
    span: 16
  };
  // 默认栅格间隔
  const DEFAULT_SPAN = 6;
  // 默认初始查询条件显示数量
  const DEFAULT_INIT_DISPLAY_NUM = 3;

  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);// 扩展控制
  const initialValues = props.initialValues ?? {};// 传递的默认项
  const { contextValue, setContextValue, handleSearch } = useContext(PageContext);// 数据共享

  useEffect(() => {
    // 初始化调用查询
    form.submit();
  }, []);

  // 处理传递的查询条件
  const getFields = () => {
    const count = expand ? props.fieldItems.length : DEFAULT_INIT_DISPLAY_NUM;
    const children = [];
    const fieldItems = props.fieldItems.slice(0, count);

    fieldItems.map((item, index) => {
      children.push(
        <Col span={DEFAULT_SPAN} key={index}>
          {item}
        </Col>
      );
    });

    return children;
  };

  // 计算操作项 偏移量 使其一直位于最右侧方
  const buttonOffset = useMemo(() => {
    if (!expand) return 0;

    const count = props.fieldItems.length;
    const gutter = 24 / DEFAULT_SPAN; // 分割数
    let offset = count % (24 / DEFAULT_SPAN); // 取余数
    offset = (gutter - offset - 1) * DEFAULT_SPAN; // 计算偏移量

    return offset;
  }, [expand]);

  // 点击查询处理
  const onFinish = (fieldsValue) => {// 如果需要所有表单参数  使用自带参数
    fieldsValue = form.getFieldsValue(true);// 手动获取好处 自动过滤掉没有输入的表单信息
    // React Context 数据共享用
    setContextValue(Object.assign(contextValue, { fieldsValue }));

    handleSearch();
  };

  // 重置表单处理
  const onReset = () => {
    form.resetFields();
  };

  // 展开/收缩处理
  const handleExpand = () => {
    setExpand(!expand);
  };

  return (
    <div className="advanced_search_wrap">
      <Form name="advanced_search" className="ant-advanced-search-form" form={form} labelCol={labelCol}
            wrapperCol={wrapperCol} initialValues={initialValues} onFinish={onFinish}
      >
        <Row gutter={24} align={"middle"}>
          {getFields()}
          <Col span={6} style={{ textAlign: "right" }} offset={buttonOffset}>
            <Space style={{ marginBottom: `24px` }}>
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>查询</Button>
              <Button style={{ margin: "0 8px" }} onClick={onReset}>重置</Button>
              {props.fieldItems.length > DEFAULT_INIT_DISPLAY_NUM &&
              <a style={{ fontSize: 12 }} onClick={handleExpand}>
                {expand ? <UpOutlined /> : <DownOutlined />}
                {expand ? `收起` : `展开`}
              </a>}
            </Space>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default AdvancedSearchForm;
